import 'package:azring/pages/status/menstrual_cycle/calendar/menstrual_cycle_calendar_logic.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:intl/intl.dart';

/// 更新本月生理期对话框
class UpdatePeriodDialog extends StatelessWidget {
  final MenstrualCycleCalendarLogic logic;

  const UpdatePeriodDialog({
    super.key,
    required this.logic,
  });

  @override
  Widget build(BuildContext context) {
    return Dialog(
      backgroundColor: const Color(0xFF282528),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20.r),
      ),
      child: Container(
        padding: EdgeInsets.all(24.w),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // 标题和编辑按钮
            Row(
              children: [
                Icon(
                  Icons.calendar_today,
                  color: Colors.pink,
                  size: 24.sp,
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: Text(
                    '更新本月生理期',
                    style: TextStyle(
                      fontSize: 20.sp,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
                Obx(() => TextButton(
                      onPressed: logic.toggleEditMode,
                      child: Text(
                        logic.state.isEditMode.value ? '完成' : '编辑',
                        style: TextStyle(
                          fontSize: 16.sp,
                          color: Colors.pink,
                        ),
                      ),
                    )),
              ],
            ),

            SizedBox(height: 24.h),

            // 开始日期选择
            Obx(() => _buildDateField(
                  context: context,
                  label: '请记录本月月经开始时间',
                  date: logic.state.updateStartDate.value,
                  enabled: logic.state.isEditMode.value,
                  onTap: () => logic.selectStartDate(context),
                )),

            SizedBox(height: 16.h),

            // 结束日期选择
            Obx(() => _buildDateField(
                  context: context,
                  label: '请记录本月月经结束时间',
                  date: logic.state.updateEndDate.value,
                  enabled: logic.state.isEditMode.value,
                  onTap: () => logic.selectEndDate(context),
                )),

            SizedBox(height: 24.h),

            // 底部按钮
            Row(
              children: [
                Expanded(
                  child: TextButton(
                    onPressed: () => Get.back(),
                    style: TextButton.styleFrom(
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      backgroundColor: Colors.grey[800],
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                    ),
                    child: Text(
                      '取消',
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: TextButton(
                    onPressed: logic.saveUpdatedPeriod,
                    style: TextButton.styleFrom(
                      padding: EdgeInsets.symmetric(vertical: 12.h),
                      backgroundColor: Colors.pink,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12.r),
                      ),
                    ),
                    child: Text(
                      '保存',
                      style: TextStyle(
                        fontSize: 16.sp,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  /// 构建日期选择字段
  Widget _buildDateField({
    required BuildContext context,
    required String label,
    required DateTime? date,
    required bool enabled,
    required VoidCallback onTap,
  }) {
    final DateFormat formatter = DateFormat('M月 d日');

    return GestureDetector(
      onTap: enabled ? onTap : null,
      child: Container(
        padding: EdgeInsets.all(16.w),
        decoration: BoxDecoration(
          color: enabled ? const Color(0xFF2A2A2A) : Colors.grey[850],
          borderRadius: BorderRadius.circular(12.r),
          border: Border.all(
            color: enabled ? Colors.grey[700]! : Colors.grey[800]!,
            width: 1,
          ),
        ),
        child: Row(
          children: [
            Icon(
              Icons.calendar_today_outlined,
              color: enabled ? Colors.white : Colors.grey[600],
              size: 20.sp,
            ),
            SizedBox(width: 12.w),
            Expanded(
              child: Text(
                date != null ? formatter.format(date) : label,
                style: TextStyle(
                  fontSize: 16.sp,
                  color: date != null
                      ? Colors.white
                      : (enabled ? Colors.grey[400] : Colors.grey[600]),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
